<template>
	<view>
		<!-- 服务评分部分 -->
		<view class="rating-section">
			<image class="store-image" :src="infoList.photo"></image>
			<view class="rating-details">
				<text class="store-name">{{ infoList.name }}</text>
				<uni-rate v-model="rateValue" @change="onChange" class="rate-component" />
			</view>
		</view>
		<!-- 评语部分 -->
		<view class="comment-section">
			<text class="comment-title">评语 (0-200字)</text>
			<textarea v-model="content" class="comment-input" placeholder="请输入评语..."></textarea>
		</view>
		<!-- 照片上传部分 -->
		<view>
			<uni-section>
				<view class="example-body">
					<uni-file-picker limit="9" title="照片 (选填)"></uni-file-picker>
				</view>
			</uni-section>
		</view>
		<!-- 提交按钮 -->
		<view class="submit-section">
			<button class="submit-button" @click="addEva">提交</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rateValue: 0,
			content: '',
			imageStyles: {
				width: 64,
				height: 64,
				border: {
					radius: '50%'
				}
			},
			infoList: '',

			listStyles: {
				// 是否显示边框
				border: true,
				// 是否显示分隔线
				dividline: true,
				// 线条样式
				borderStyle: {
					width: 1,
					color: 'blue',
					style: 'dashed',
					radius: 2
				}
			}
		};
	},
	onLoad() {
		// 模拟动态赋值
		setTimeout(() => {
			this.rateValue = 3;
		}, 1000);
	},
	created() {
		this.getShop();
		this.getEva();
	},
	methods: {
		onChange(e) {
			console.log('rate发生改变:' + JSON.stringify(e));
			console.log(this.rateValue);
		},
		submitReview() {
			// 处理提交逻辑
			console.log('提交评审:', {
				rateValue: this.rateValue,
				content: this.content
			});
		},
		getShop() {
			uni.request({
				url: 'http://localhost:9206/shop/1',
				method: 'GET', // 请求方法
				data: {}, // 请求体，传递的数据
				header: {
					// 'Authorization': `Bearer ${token}`
					Authorization: `Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjA2NzkxYWFiLWFlYmMtNDQ2Yy1iOTNjLTM0YWJiNWExZDAxNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.rOzX8DtBXl9l3LIfvsFhvEieOAPi-ptVQNfiudg8oiKkv1rdZpV0wjOhIooHqVIq85yRvaXmVmksuSqiL0Ldfg`,
					Cookie: 'Admin-Token=eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjA2NzkxYWFiLWFlYmMtNDQ2Yy1iOTNjLTM0YWJiNWExZDAxNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.rOzX8DtBXl9l3LIfvsFhvEieOAPi-ptVQNfiudg8oiKkv1rdZpV0wjOhIooHqVIq85yRvaXmVmksuSqiL0Ldfg; Admin-Expires-In=720; sidebarStatus=0'
				},
				success: (res) => {
					console.log('请求成功:', res);
					this.infoList = res.data.data;
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			});
		},
		addEva() {
			uni.request({
				url: 'http://localhost:9206/evaluate',
				method: 'POST', // 请求方法

				data: {
					userId: 4,
					mid: 1,
					orderId: 123456,
					serviceId: 5,
					rate: this.rateValue,
					imgs: 'https://yunqim.oss-cn-wulanchabu.aliyuncs.com/2024/SEPTEMBER/12/15/8/159ed270-3434-4b4a-9d46-80b9d75d1af9.jpg',
					content: this.content
				}, // 请求体，传递的数据
				header: {
					// 'Authorization': `Bearer ${token}`
					Authorization: `Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjA2NzkxYWFiLWFlYmMtNDQ2Yy1iOTNjLTM0YWJiNWExZDAxNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.rOzX8DtBXl9l3LIfvsFhvEieOAPi-ptVQNfiudg8oiKkv1rdZpV0wjOhIooHqVIq85yRvaXmVmksuSqiL0Ldfg`,
					Cookie: 'Admin-Token=eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjA2NzkxYWFiLWFlYmMtNDQ2Yy1iOTNjLTM0YWJiNWExZDAxNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.rOzX8DtBXl9l3LIfvsFhvEieOAPi-ptVQNfiudg8oiKkv1rdZpV0wjOhIooHqVIq85yRvaXmVmksuSqiL0Ldfg; Admin-Expires-In=720; sidebarStatus=0'
				},
				success: (res) => {
					// console.log('请求成功:', res);
					uni.redirectTo({
						// url: '/pages/my/myVehicle/addSucceed'
					});
				},
				fail: (err) => {
					console.error('请求失败:', err);
				}
			});
		},
		getEva() {
			uni.request({
				url: 'http://localhost:9206/evaluate/list',
				method: 'GET', // 请求方法
				data: {}, // 请求体，传递的数据
				header: {
					// 'Authorization': `Bearer ${token}`
					// Authorization: `Bearer eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjA2NzkxYWFiLWFlYmMtNDQ2Yy1iOTNjLTM0YWJiNWExZDAxNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.rOzX8DtBXl9l3LIfvsFhvEieOAPi-ptVQNfiudg8oiKkv1rdZpV0wjOhIooHqVIq85yRvaXmVmksuSqiL0Ldfg`,
					// Cookie: 'Admin-Token=eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6IjA2NzkxYWFiLWFlYmMtNDQ2Yy1iOTNjLTM0YWJiNWExZDAxNSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.rOzX8DtBXl9l3LIfvsFhvEieOAPi-ptVQNfiudg8oiKkv1rdZpV0wjOhIooHqVIq85yRvaXmVmksuSqiL0Ldfg; Admin-Expires-In=720; sidebarStatus=0'
				},
				success: (res) => {
					console.log('请求成功:', res);
					this.evaList = res.data.data;
				},
				fail: (err) => {
					console.error('请求失败:111', err);
				}
			});
		},
	}
};
</script>

<style scoped lang="scss">
page {
	background-color: #fff;
}
/* 服务评分部分  */
.rating-section {
	display: flex;
	align-items: center;
	padding: 10px;
	border-bottom: 1px solid #ccc;
}

.store-image {
	width: 100px;
	height: 100px;
}

.rating-details {
	margin-left: 10px;
	flex: 1;
}

.store-name {
	font-size: 16px;
	font-weight: bold;
}

.rate-component {
	margin-top: 5px;
}
/* 评语部分 */
.comment-section {
	padding: 10px;
}

.comment-title {
	font-size: 14px;
	margin-bottom: 5px;
}

.comment-input {
	width: 96%;
	height: 100px;
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 5px;
	resize: none;
}

.submit-button {
	background-color: #007aff;
	color: #fff;
	width: 80%;
	height: 40px;
	line-height: 20px;
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}

/* 上传图片 */
.example-body {
	padding: 10px;
	padding-top: 0;
}

.custom-image-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.text {
	font-size: 14px;
	color: #333;
}
</style>
